import React, { useState, useEffect } from 'react';
import { ProTable } from '@ant-design/pro-components';
import type { ProColumns } from '@ant-design/pro-components';
import { Button } from 'antd';
import { getOperationLogs } from '../../../api/axios8082'; // 引入你的接口函数  
import { AxiosResponse } from 'axios';
import { ColumnProps } from 'antd/lib/table';



// 你之前定义的 LogItem 类型  


interface LogItem {
  id: string;
  userId: string;
  productId: string;
  operator: string;
  remark: null | string; // remark 可能是 null 或 string  
  createTime: string; // 根据你的数据，createTime 是字符串类型   
}

interface OperationLogsData {
  total: string;
  record: LogItem[]; // record 是一个LogItem类型的数组    
}
// 定义整个API响应的接口  
interface OperationLogsResponse {
  code: number; // 通常code是数字类型  
  msg: null | string; // msg 可能是 null 或 string  
  data: OperationLogsData; // data 是OperationLogsData类型的对象  

}
// UserTable 组件  
const Operation: React.FC<{ productId: string }> = ({ productId }) => {
  const [dataSource, setDataSource] = useState<LogItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(5);
  const [total, setTotal] = useState(0); // 添加状态来保存总记录数     

  // 定义表格列，根据接口返回的数据结构进行调整  
  const userColumns: ProColumns<LogItem>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '状态',
      dataIndex: 'operator',
      key: 'status',
    },
    {
      title: '操作人',
      dataIndex: 'userId', // 修改为LogItem中实际的字段名  
      key: 'userId',
    },
    {
      title: '操作时间',
      dataIndex: 'createTime', // 修改为LogItem中实际的字段名  
      key: 'createTime',
    },
  ];

  // 在组件挂载后获取数据  
  useEffect(() => {
    const fetchData = async () => {
      try {
        // 使用类型断言  
        const unknownResponse: unknown = await getOperationLogs(page, size, productId);
        const response = unknownResponse as OperationLogsResponse;
        if (response.code === 0 && response.data.total !== '0') { // 假设total是字符串表示的数量  
          setDataSource(response.data.record);
          setTotal(Number(response.data.total));
        } else {
          setDataSource([]);
          console.error('Error fetching operation logs or no data returned:', response.msg || 'Unknown error');
        }
      } catch (error) {
        setDataSource([]);
        console.error('An unexpected error occurred while fetching operation logs:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [page, size, productId]);

  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
    const { current, pageSize } = pagination;
    // 使用 size 而不是 pageSize，以保持与状态定义的一致性  
    setPage(current);
    setSize(pageSize);  
  };

  return (

    <ProTable<LogItem>
      columns={userColumns}
      dataSource={dataSource}
      loading={loading}
      pagination={{
        current: page, //page 状态作为当前页码  
        pageSize: size, //size 状态作为每页大小  
        onChange: (newPage) => {
          setPage(newPage);
          console.log('Page changed to:', newPage);
        },
      }}
      className="equal-width-table"
      options={false}
      search={false}
    />
  );
};

export default Operation;